<style>
    .layui-btn .layui-icon{
        margin-right: 0;
    }
</style>
<form class="layui-form seller-form" action="">
	<div class="layui-form-item">
		<div class="layui-inline">
			<button class="layui-btn add-class layui-btn-sm"><i class="layui-icon">&#xe608;</i> 添加</button>
		</div>
	</div>
</form>

<div class="table-body">
	<table id="typeTable" lay-filter="test"></table>
</div>

<script>
    var table;
    layui.use(['form', 'layedit', 'laydate','table'], function(){
        var form = layui.form;

        table = layui.table.render({
            elem: '#typeTable',
            height: 'full-220',
            cellMinWidth: '80',
            page: 'true',
            limit:'20',
            url: "{:url('GoodsType/index')}?_ajax=1",
            id:'typeTable',
            cols: [[
                {type:'numbers'},
                {field:'name', width:150,title:'名称'},
                {field:'params', width:240,title:'参数',templet:function (data) {
                    if(typeof(data.params) == "undefined"||data.params.length==0){
                        var html='<a href="javascript:void(0);" data-id="'+data.id+'" onclick="addParams('+data.id+')">关联参数</a>';
                        return html;
                    }else{
                        var html=' <a href="javascript:void(0);" data-id="'+data.id+'" onclick="addParams('+data.id+')">变更参数</a>';
                        $.each(data.params,function(i,j){
                            html = html + "|"+ j.name;
                        });
                        html=html.substr(1);
                        return html;
                    }
                }},
                {field:'spec', width:240,title:'属性',templet:function(data){
                    if(typeof(data.spec) == "undefined"||data.spec.length==0){
                        var html='<a href="javascript:void(0);" data-id="'+data.id+'" onclick="addRel('+data.id+')">关联属性</a>';
                        return html;
                    }else{
                        var html=' <a href="javascript:void(0);" data-id="'+data.id+'" onclick="addRel('+data.id+')">变更属性</a>';
                        $.each(data.spec,function(i,j){
                            html = html + "|"+ j.name;
                        });
                        html=html.substr(1);
                        return html;
                    }
                }},
                {field:'operating',title:'操作',templet:function(data){
                    var html='';
                    var html = '<a  class="layui-btn layui-btn-xs edit-class" data-id="' + data.id + '">编辑</a>';
                    html += '<a class="layui-btn layui-btn-danger layui-btn-xs del-class" data-name="'+data.name+'" data-id="' + data.id + '">删除</a>';
                    return html;
                }}
            ]]
        });
        layui.form.on('submit(*)', function(data){
            layui.table.reload('userTable', {
                where: data.field
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //添加分类
        $(document).on('click', '.add-class', function(){
            var id = $(this).attr('data-id');
            $.ajax({
                url: '{:url("GoodsType/add")}',
                type: 'get',
                success: function(e){
                    window_box = layer.open({
                        type: 1,
                        title: '添加类型',
                        area: ['750px', '440px'], //宽高
                        content: e,
                        btn:['保存','关闭'],
                        success:function (layero,index) {
                            layero.addClass('layui-form');//添加form标识
                            layero.find('.layui-layer-btn0').attr('lay-filter', 'fromContent').attr('lay-submit', '');
                            form.render();
                        },
                        yes:function () {
                            form.on('submit(fromContent)', function (data) {
                                JsPost("{:url('GoodsType/add')}", data.field, function(res){
                                    if(res.status){
                                        layer.close(window_box);
                                        layer.msg(res.msg, {time: 1300}, function(){
                                            table.reload('typeTable');
                                        });
                                    }else{
                                        layer.msg(res.msg);
                                    }
                                })
                            });
                        }
                    });
                }
            });
            return false;
        });


        //编辑属性
        $(document).on('click', '.edit-class', function(){
            var id = $(this).attr('data-id');
            $.ajax({
                url: '{:url("GoodsType/edit")}',
                type: 'get',
                data: {
                    'id': id
                },
                success: function(e){
                    window_box = layer.open({
                        type: 1,
                        title: '编辑类型',
                        area: ['400px', '240px'], //宽高
                        content: e
                    });
                }
            })
        });
        //编辑保存数据
        $(document).on('click', '.add-edit-btn', function(){
            var name = $("#type_name").val();
            var id = $("#type_id").val();
            var error = false;
            if(name.length > 6 || name.length < 1){
                error = true;
                layer.msg('分类名称在1-6个字符之间', {time: 1300});
                return false;
            }
            if(!id||id==''){
                layer.msg('关键参数丢失', {time: 1300});
                return false;
            }
            if(!error){
                $.ajax({
                    url: '{:url("GoodsType/edit")}',
                    type: 'post',
                    data: {
                        'name': name,
                        'id':id
                    },
                    dataType: 'json',
                    success: function(e){
                        if(e.status === true){
                            layer.close(window_box);
                            layer.msg(e.msg, {time: 1300}, function(){
                                table.reload('typeTable');
                            });
                        }else{
                            layer.msg(e.msg, {time: 1300});
                        }
                    }
                })
            }
        });


        //删除分类
        $(document).on('click', '.del-class', function(){
            var id = $(this).attr('data-id');
            var name = $(this).attr('data-name');
            layer.confirm('确认删除类型：'+name+' 吗？', {
                title: '提示', btn: ['确认', '取消'] //按钮
            }, function(){
                delClass(id);
            });
        });

        //删除操作
        function delClass(id){
            $.ajax({
                url: '{:url("GoodsType/del")}',
                type: 'post',
                data: {
                    'id': id
                },
                success: function(e){
                    layer.msg(e.msg, {time: 1300}, function(){
                        table.reload('typeTable');
                    });
                }
            });
        }

    });

    /**
     * 关联属性
     */
    function addRel(id){
        JsGet('{:url("GoodsType/addRel")}?id='+id,function (e) {
            window_box = layer.open({
                type: 1,
                title: '关联属性',
                area: ['400px', '340px'], //宽高
                btn:['保存','取消'],
                content: e,
                yes:function (e) {
                    var data = $("#specForm").serializeArray();
                    JsPost('{:url("GoodsType/addRel")}',data,function (e) {
                        if(e.status === true){
                            layer.close(window_box);
                            layer.msg(e.msg, {time: 1300}, function(){
                                table.reload('typeTable');
                            });
                        }else{
                            layer.msg(e.msg, {time: 1300});
                        }
                    });
                }
            });
        });
    }

    /**
	 * 关联参数
     * @param id
     */
    function addParams(id) {
        JsGet('{:url("GoodsType/addParams")}?id='+id,function (e) {
            window_box = layer.open({
                type: 1,
                title: '关联属性',
                area: ['400px', '340px'], //宽高
                content: e,
				btn:['保存','取消'],
				yes:function (e) {
                    var data = $("#paramsForm").serializeArray();
                    JsPost('{:url("GoodsType/addParams")}',data,function (e) {
                        if(e.status === true){
                            layer.close(window_box);
                            layer.msg(e.msg, {time: 1300}, function(){
                                table.reload('typeTable');
                            });
                        }else{
                            layer.msg(e.msg, {time: 1300});
                        }
                    });
                }
            });
        });
    }
</script>
